<template>
  <h1>{{ msg }}</h1>
  <button @click="setCount">{{ count }}</button>
  <input v-model="todo" type="text" />
  <button class="addTodo" @click="addTodo">add</button>
  <button class="loadUser" @click="loadUser">load</button>
  <p v-if="user.loading" class="loading">loading</p>
  <div v-else class="userName">{{ user.data && user.data.userName }}</div>
  <p v-if="user.error" class="error">error!</p>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
  </ul>
  <hello msg="1234"></hello>
</template>

<script lang="ts" setup>
import axios from 'axios'

defineProps<{ msg: string }>()
const emit = defineEmits(['send'])
const todo = ref('')
const todos = ref([])
const user = reactive({
  data: null as any,
  loading: false,
  error: false
})

const count = ref(1)
const setCount = () => {
  count.value++
}
const addTodo = () => {
  if (todo.value) {
    todos.value.push(todo.value)
    emit('send', todo.value)
  }
}

const loadUser = () => {
  user.loading = true
  axios
    .get('https://jsonplaceholder.typicode.com/user/1')
    .then(res => {
      console.log(res)
      user.data = res.data
    })
    .catch(() => {
      user.error = true
    })
    .finally(() => {
      user.loading = false
    })
}
</script>
<style lang="scss" scoped></style>
